<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中国供应商分布图</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <!-- 引入地图数据 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
    <!-- 引入 jQuery -->
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f0f0;
        }

        #main {
            width: 100%;
            height: 800px; /* 设置地图容器高度 */
        }
    </style>
</head>
<body>
<div id="main"></div>

<script>
    var myChart = echarts.init(document.getElementById('main'));
    myChart.showLoading(); // 显示加载动画

    // 发送请求获取后端数据
    $.get('http://localhost:8089/customer/countByProvince').done(function (res) {
        console.log('请求成功:', res);
        var data = res.data;

        // 准备 echarts 的地图数据格式
        var mapData = [];
        for (var i = 0; i < data.length; i++) {
            var province = data[i].name;
            var count = data[i].count;
            mapData.push({ name: province, value: count });
        }

        // 隐藏加载动画，渲染地图
        myChart.hideLoading();
        myChart.setOption({
            title: {
                text: '超市供应厂商分布',
                left: 'center',
                top: 30, // 标题位置稍微下移
                textStyle: {
                    color: '#333',
                    fontSize: 24,
                    fontWeight: 'bold'
                }
            },
            tooltip: {
                trigger: 'item'
            },
            visualMap: {
                min: 0,
                max: 10, // 根据实际数据范围设置
                left: 'left',
                top: 'bottom',
                text: ['高', '低'], // 文本，默认为数值文本
                calculable: true
            },
            series: [
                {
                    name: '供应商分布',
                    type: 'map',
                    map: 'china',
                    roam: true,
                    label: {
                        show: true,
                        fontSize: 8
                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    },
                    data: mapData // 将处理后的数据作为地图数据
                }
            ]
        });
    }).fail(function (xhr, status, error) {
        console.error('请求失败:', status, error);
        myChart.hideLoading();
    });
</script>
</body>
</html>
